
<link rel="stylesheet" href="./static/fineuploader.css">
<style>
    .tag-box {
        background: #fff none repeat scroll 0 0;
        margin-bottom: 30px;
        padding: 20px;
    }

    .tag-box h2 {
        font-size: 20px;
        line-height: 25px;
    }

    .tag-box p {
        margin-bottom: 0;
    }

    .tag-box.tag-text-space p {
        margin-bottom: 10px;
    }

    .tag-box-v1 {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #72c02c #eee #eee;
        border-image: none;
        border-style: solid;
        border-width: 2px 1px 1px;
    }

    .tag-box-v2 {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #fafafa none repeat scroll 0 0;
        border-color: #eee #eee #eee #72c02c;
        border-image: none;
        border-style: solid;
        border-width: 1px 1px 1px 2px;
    }

    .tag-box-v3 {
        border: 2px solid #eee;
    }

    .tag-box-v4 {
        border: 1px solid #bbb;
    }

    .tag-box-v5 {
        border: 1px solid #eee;
        margin: 20px 0;
        text-align: center;
        border-radius: 3px;
    }

    /*.tag-box-v5 span {
        color: #555;
        font-size: 28px;
        margin-bottom: 0;
    }*/

    .tag-box-v6 {
        background: #fafafa none repeat scroll 0 0;
        border: 1px solid #eee;
    }

    .tag-box-v7 {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #eee #eee #72c02c;
        border-image: none;
        border-style: solid;
        border-width: 1px 1px 2px;
    }

    #uploadstartDz {
        /*
                width: 240px;
                padding: 0;
                height: 60px;
                font-size: 18px;
                line-height: 58px;
        */
    }

    #uploadstartDz .iconfont {
        font-size: 30px;
        margin-right: 10px;
        position: relative;
        top: 2px;
    }

    #uploadstartDz .text {
        position: relative;
        top: -3px;
    }

    .qq-uploader-selector {
        height: auto;
    }

    .qq-upload-button-selector {
        margin-top: 140px;
        margin-bottom: 80px;
    }
    .uploaded-success{
      text-align: center;
    margin-bottom: 30px;
    }
    .uploaded-success .img-wrap{
      display: flex;
      justify-content: center;
    margin-bottom: 20px;
    }
</style>

<div class="release-app-wrap" style="overflow: hidden;" id="internalApp">
  <!--改版-->
  <div class="release-app2">
    <!--面包屑导航-->
    <div class="crumbs iframe-crumbs">
      <img class="crumbs_icon" src="./static/crumbs_icon.png" />
      <a href="./apps">大众云盘</a><span>/</span>上传应用
    </div>
    <!--/面包屑导航-->

    <div class="clearfix">
      <div class="left-collapse-box sidebar-fixed">
        <aside class="aside-left">
          <ul>
            <li>
              <a href="javascript:void(0);" class="left-collapse-title"
                ><img src="./static/right_bold.png" />大众云盘</a
              >
            </li>
            <li class="active">
              <a href="javascript:;" 
                ><span class="iconfont icon-upload1"></span>上传应用</a
              >
            </li>
            <li>
              <a href="javascript:;" id="InternalTestReleaseInner" onclick="switchTab('InternalTestReleaseInner')" 
                ><span class="iconfont icon-41"></span>应用列表</a
              >
            </li>
          </ul>
        </aside>
        <!--
              <a class="big-bag-upload" href="/large-app">
                  <img src="/static/img/img-big.jpg" class="img-responsive">
              </a>
              -->
      </div>
      <div class="right-collapse-box">
        <div class="aside-right" v-if="uploadedState === 0">
          <div class="warn-prompt" style="margin-bottom: 10px">
            <span class="icon-warn iconfont"></span>
            您当前尚未实名，APP只能下载5次；实名认证通过后，每天平台免费赠送100次下载（仅限300M以下的APP）。
            <a href="./certification" class="color-hover"
              >立即实名认证</a
            >
          </div>
          <div class="release-app">
            <div class="upload-file">
              <div
                class="row tag-box tag-box-v5"
                id="container"
                style="
                  background: rgb(250, 250, 251);
                  margin-top: 90px;
                  position: relative;
                "
              >
                <div class="span12">
                  <div id="bootstrapped-fine-uploader"></div>

                  <div class="qq-uploader-selector qq-uploader span12">
                    <div id="upprocess" style="display: none">
                      <span
                        class="qq-drop-processing-selector qq-drop-processing"
                      >
                        <!--                        <span>如果长时间没有反应请联系
                  <a target="_blank"
                     href="http://wpa.qq.com/msgrd?v=3&amp;uin=1455653215&amp;site=qq&amp;menu=yes">QQ:1455653215</a>处理</span>
-->
                        <span
                          class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"
                        ></span
                      ></span>
                      <div class="upload-app-icon" id="loading">
                        <img
                          src=""
                        />
                      </div>
                      <div class="loadend"></div>
                      <ul class="qq-upload-list-selector qq-upload-list">
                        <li>
                          <div style="margin-bottom: 20px">
                            <span id="upload-app-name">正在解析...</span>
                          </div>
                          <div style="margin-bottom: 20px">
                            正在上传中，请不要关闭浏览器
                          </div>
                          <div
                            class="qq-progress-bar-container-selector progress progress-striped active"
                          >
                            <div
                              class="qq-progress-bar-selector progress-bar progress-bar-warning"
                              role="progressbar"
                            ></div>
                          </div>
                          <span
                            class="qq-upload-spinner-selector qq-upload-spinner alreadyup"
                            style="width: auto; font-size: 14px"
                          ></span>
                          <span
                            class="qq-upload-file-selector qq-upload-file"
                          ></span>
                          <span
                            class="qq-upload-size-selector qq-upload-size tolsize"
                            style="width: auto; font-size: 14px"
                          ></span>
                          <br />
                          <br />
                          <a
                            class="qq-upload-cancel-selector btn-u btn-u-default ms-btn ms-btn-default"
                            href="javascript:;"
                            id="changest"
                            >暂停上传</a
                          >
                          <span
                            class="qq-upload-status-text-selector qq-upload-status-text"
                          ></span>
                          <div
                            id="retry"
                            style="display: none; margin-top: 20px"
                          >
                            <a
                              class="btn-u btn-u-default"
                              href="javascript:void(0);"
                              onclick="javascript:retry();"
                              >重新上传</a
                            >
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="col-md-12">
                      <div
                        class="qq-upload-button-selector"
                        style="width: auto"
                        id="upbtn"
                      >
                        <div style="margin-bottom: 30px">
                          <img src="./static/upload-yun.png" />
                        </div>
                        <div>
                          <button
                            class="ms-btn ms-btn-primary upload-btn"
                            id="uploadstartDz"
                            style="
                              width: 240px;
                              padding: 0px;
                              height: 60px;
                              font-size: 18px;
                              line-height: 58px;
                              border-radius: 30px;
                              z-index: 1;
                            "
                          >
                            <span class="iconfont icon-upload"></span>
                            <span class="text">立即上传</span>
                          </button>
                        </div>
                        <div style="margin-top: 20px"></div>

                        点击按钮选择应用的安装包，或拖拽文件到此区域
                        <br />
                        （支持.ipa或.apk文件，单个文件最大支持
                        <span style="color: red; font-size: 14px"> 300M </span
                        >）
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  id="html5_1f54qj77l1udm17p52ii1hfgier4_container"
                  class="moxie-shim moxie-shim-html5"
                  style="
                    position: absolute;
                    top: 183px;
                    left: 409px;
                    width: 240px;
                    height: 60px;
                    overflow: hidden;
                    z-index: 0;
                  "
                >
                  <input
                    id="html5_1f54qj77l1udm17p52ii1hfgier4"
                    type="file"
                    style="
                      font-size: 999px;
                      opacity: 0;
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      width: 100%;
                      height: 100%;
                    "
                    accept=".apk,.ipa"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="uploaded-success" v-if="uploadedState === 2">
          <div class="tit">发布成功</div>
          <div class="p1" style="margin-bottom: 20px;">恭喜您，你的APP发布成功了！</div>
          <div class="up-btn">
              <!-- <a href="https://tap.dierna.com/EnQV" target="_blank" class="ms-btn ms-btn-primary"><span class="iconfont icon-download"></span>查看下载页</a> -->
              <a @click="uploadedState = 0" class="ms-btn ms-btn-primary"><span class="iconfont icon-upload1"></span>继续上传</a>
              <!-- <a href="/user/apps/setting?id=642224244763131904" class="ms-btn ms-btn-primary"><span class="iconfont icon-set"></span>APP设置</a> -->
          </div>
        </div>

        <div class="warn-prompt-wrap clearfix">
          <dl class="warn-prompt-cont">
            <dd>
              注1：请您确认上传的APP，符合《<a
                href="./about/specification"
                target="_blank"
                class="color-hover"
                >大众云应用审核规范</a
              >》，如违反规范，APP将做删除处理，屡次上传将被封禁账号。
              <br />注2：根据最新审核规范，不接受如下APP上传本平台：色情类、直播类、金融类、区块链虚拟币等。如已上传，将做删除处理。
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <!--/改版-->

  
  <input
    type="file"
    v-if="uploadedState === 0"
    id="storage-file"
    multiple
    @change="selectFile"
    accept=".apk,.ipa"
    style="z-index: -1;position: relative;top:11110px;"
  />
</div>

<script>
  new Vue({
    el: '#internalApp',
    data: {
      uploadList: [],
      uploadFileInputFlag: true,
      uploadedState: 0, // 0未上传，1上传中，2上传成功，3上传失败
      loading: null,
    },
    methods: {
      selectFile(param){
            // 上传文件
            let files = param.target.files;
            if(files.length === 0){
                return;
            }
            let len = files.length;
            this.uploadList = [];
            for(let i=0; i<len; i++){
                this.uploadList.push(files[i]);
            }
            if(this.uploadList.length){
                this.rightUploadClick();
                debugger
                // this.uploadFileInputFlag = false;
                // this.$nextTick(() => {
                //     this.uploadFileInputFlag = true;
                // });
            }
            this.uploadedState = 1;
            this.loading = this.$loading({
              lock: true,
              text: '上传中',
              spinner: 'el-icon-loading',
            });
            $('#storage-file').val('')
        },
        rightUploadClick() {
            // 上传前获取七牛token
            axios({
                method: "POST",
                url: baseUrl + "/transfer/upToken",
            }).then(({ data }) => {
                if (data.code === 200) {
                    this.uploadToken = data.result;
                    this.start();
                    
                    // 每个文件上传前-校验
                    // this.uploadList.forEach(item => {
                    //   item.uploadFileName = item.name;
                    // })
                } else {
                    this.$message({
                        message: data.message,
                        type: "warning",
                    });
                }
            });
        },
        start(){
            let file = this.uploadList[0];
            this.uploadFile(file)
                .then(res => {
                  axios({
                      method: "POST",
                      url: baseUrl + "/storage/upload",
                      headers: {
                        authorization: localStorage.getItem("token")
                      },
                      data: {
                        fileName: this.uploadList[0].name, // 七牛返回的hash
                        filePath: res.key, // 文件ID	
                        size: this.uploadList[0].size, // 文件ID	
                      },
                  }).then(({ data }) => {
                    if (data.code === 200) {
                        let result = data.result;
                        this.loading.close();
                        this.uploadedState = 2;
                    } else {
                        this.uploadedState = 3;
                        this.$message({
                            message: data.message,
                            type: "warning",
                        });
                    }
                  });
                })
        },
        uploadFile(file) {
            // 文件上传至七牛
            return new Promise((resolve, reject) => {
              let uptoken = this.uploadToken;
              // let path = this.getPath();
              let path = new Date().getTime() + '/';
              
              
              let key = ''; //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
              var config = {
                  useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                  region: null, // 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
                  domain: "http://image.jdwxtech.com", //配置好的七牛云域名  如   https://cdn.qniyun.com/
                  chunkSize: 50, //每个分片的大小，单位mb，默认值3
                  concurrentRequestLimit: 4, // 分片上传的并发请求量，number，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
                  forceDirect: false, //直传还是断点续传方式，true为直传
              };
              var putExtra = {
                  fname: file.name, //文件原始文件名
                  params: {},
                  mimeType: file.raw ? file.raw.type : file.type,
                  // ...config,
              };
              
              key = path + file.name;
              var observable = qiniu.upload(
                  file,
                  key,
                  uptoken,
                  putExtra,
                  config
              );
            //   let fileLoadSize = 0;
              this.subscription = observable.subscribe({
                  next: (result) => {
                      //主要用来展示进度

                  },
                  error: (err) => {
                      //上传错误后触发
                      reject(err);
                  },
                  complete: (result) => {
                      //上传成功后触发。包含文件地址。
                      resolve(result);
                  },
              });
            });
        },
        
    },
  })

  $(function(){
    $('#uploadstartDz').click(function(){
      
      document.querySelector('#storage-file').click();
    })

  })

</script>